<template>
  <div v-if="is_info" class="text-ellipsis" :title="content">{{content}}</div>
  <div v-else class="form_item-text_between flex" style="line-height: 0;">
    <input type="hidden" :name="name" :value="value">
    <el-input v-model="this_value[0]" :size="size" @change="update_value" :type="type" class="max" :placeholder="placeholder"></el-input>
    <p style="padding: 0 5px;">-</p>
    <el-input v-model="this_value[1]" :size="size" @change="update_value" :type="type" class="max" :placeholder="placeholder"></el-input>
  </div>
</template>

<script>
import s94Mjs from "s94-js";

export default {
  _title_: '文本区间',
  _can_config_: true,
  _can_form_param_public_: true,
  _can_form_param_: true,
  _can_where_param_: true,
  name: "text_between",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list', 'placeholder'],
  emits: ['update:value', 'change'],
  data(){
    return {
      this_value: this.value_arr(),
      need_display: true,
    };
  },
  methods: {
    value_arr(){
      let v = s94Mjs.to_string(this.value);
      let arr = v.split(',');
      arr[1] = arr[1] || '';
      return arr;
    },
    update_value(){
      let v = this.this_value[0] || this.this_value[1] ? this.this_value.join(',') : "";
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.value_arr();
    }
  },
  computed: {
    type(){
      let map = ['password','number','color','range'];
      return ~map.indexOf(this.config) ? this.config : 'text';
    },
    content(){
      if (!this.value) return '';
      return this.value.replace(',', ' - ');
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.form_item-text_between{display: flex;}
</style>